import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, StatusBar, TextInput} from 'react-native';
import { base } from "../../../assets/style";
import Loading from '../../../components/loading/index'
import { setStateAsync, setStateAsyncObj } from "../../../utils/utils";
import { API } from "../../../api";
import { i18n } from "../../../utils/locales/i18n";

type Props = {};
export default class MyAssets extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: i18n.t('m_as'),
            headerBackTitle: null,
            headerTintColor: '#0f0f0f',
            headerRight: (
                <TouchableOpacity onPress={() => navigation.navigate('Record')}>
                    <View style={{ paddingRight: 10 }}>
                        <Text style={{color: '#ff7606'}}>{ i18n.t('rec') }</Text>
                    </View>
                </TouchableOpacity>
            )
        }
    };
    constructor() {
        super();
        this.state = {
            loadingVisible: false,
            loadingInfo: '',
            assets: [{
                Available: 0,
                Freeze: 0,
                Price: "0"
            }]
        }
    }
    componentDidMount(): void {
        this._initAssetsData()
    }
    _initAssetsData = async () => {
        await setStateAsyncObj(this, { loadingVisible: true, loadingInfo: i18n.t('loading') })
        const res = await API._fetch('getAssets', {}, 'GET')
        // console.log(res);
        // code: 10000
        // data:
        //     Fcc:
        //         Available: 0
        // Freeze: 0
        // Price: "0"
        // Hkdc: {Available: 0, Freeze: 0, Price: "0"}
        // msg: "获取信息成功"
        // status: 200
        if (res && res.data) {
            this.setState({ assets: [{  key: 'aaa', ...res.data['Fcc'] }]})
        }
        this.setState({ loadingVisible: false, loadingInfo: '' })
    }
    toWithdrawPage = () => {
        this.props.navigation.navigate('Withdraw')
    }
    toRechargeAddressPage = () => {
        this.props.navigation.navigate('RechargeAddress')
    }
    render() {
        return (
        <View style={[base.container]}>
            { this.state.loadingVisible ? (<Loading info={this.state.loadingInfo}/>) : null }
            {/*header*/}
            {/*<View style={[base.content_container, base.flex_row_start, { height: 50, backgroundColor: '#fff' }]}>*/}
                {/*<Image style={{width: 16, height: 16}} source={require('../../../images/mine/brint.png')}/>*/}
                {/*<View style={{ paddingLeft: 5 }}><Text>当前总估值： 5.15 BTC = <Text style={[base.color_orange]}>231,830.12 CNY</Text></Text></View>*/}
            {/*</View>*/}
            <View style={[base.container]}>
                <FlatList
                    data={this.state.assets}
                    renderItem={
                        ({item}) => {
                            return (
                                <View style={[base.content_container, { marginTop: 10, height: 150 }]}>
                                    <View style={[base.flex_1, {backgroundColor: '#fff', borderRadius: 5}]}>
                                        <View style={[base.flex_row_between, base.content_container, { height: 50 }]}>
                                            <View style={[base.flex_row_start]}>
                                                <Image source={require('../../../images/mine/icon-fcc.png')} style={{width: 20, height: 20}}/>
                                                <View style={{ paddingLeft: 10 }}><Text style={{fontSize: 18}}>FCC</Text></View>
                                            </View>
                                            <View><Text style={[base.color_orange]}>{ i18n.t('sum') }   {Number(item.Available) + Number(item.Freeze)}</Text></View>
                                        </View>
                                        <View style={[base.flex_1, base.flex_row_between, { paddingBottom: 10 }]}>
                                            <View style={[base.flex_1, base.content_container, { justifyContent: 'space-between', height: '100%', paddingBottom: 20 }]}>
                                                <View><Text style={[base.color_gray]}>{ i18n.t('as_sum') }： ~ USD</Text></View>
                                                <View><Text style={[base.color_gray]}>{ i18n.t('freeze') }： { item.Freeze }</Text></View>
                                                <View><Text style={[base.color_gray]}>{ i18n.t('rest') }： { item.Available }</Text></View>
                                            </View>
                                            <View style={[{ width: 100, height: '100%', paddingRight: 10, paddingVertical: 10, justifyContent: 'flex-end', alignItems: 'flex-end' }]}>
                                                <TouchableOpacity onPress={this.toRechargeAddressPage} style={{ width: '80%', height: 25 }}>
                                                    <View style={[base.flex_1, base.bg_orange, base.flex_row_center, { borderRadius: 5 }]}>
                                                        <Text style={[base.color_white]}>{ i18n.t('recharge') }</Text>
                                                    </View>
                                                </TouchableOpacity>
                                                <TouchableOpacity onPress={this.toWithdrawPage} style={{ width: '80%', height: 25, marginTop: 10 }}>
                                                    <View style={[base.flex_1, base.bg_orange, base.flex_row_center, { borderRadius: 5 }]}>
                                                        <Text style={[base.color_white]}>{ i18n.t('withdraw') }</Text>
                                                    </View>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            )
                        }
                    }
                />
            </View>
        </View>
        )
    }
}

const styles = StyleSheet.create({
});
